<template>
  <div class="login">
    <div class="account" v-if="!isPhoneLogin">
      <top-header :isLeft="true" title="登录星享俱乐部"></top-header>
      <div class="login-content">
        <login-input v-for="(item, index) in accountData" :key="index" :info="item"></login-input>
      </div>
      <div class="login-opreate">
      <a-button type="primary" block shape="round" @click="login()">
        登录
      </a-button>
      <a-button type="link" @click="isPhoneLogin=!isPhoneLogin">
        使用手机号注册/登录
      </a-button>
    </div>
    </div>
    
    <div class="phone" v-if="isPhoneLogin">
      <top-header :isLeft="true" title="欢迎来到星享俱乐部"></top-header>
      <div class="login-content">
        <login-input v-for="(item, index) in  phoneData" :key="index" :info="item"></login-input>
      </div>
      <div class="login-opreate">
        <a-button type="primary" block shape="round" @click="login()">
          登录/注册
        </a-button>
        <a-button type="link" @click="isPhoneLogin=!isPhoneLogin">
          使用账号密码登录
        </a-button>
      </div>
    </div>
  </div>
</template>

<script>

import TopHeader from '../components/TopHeader.vue';
import LoginInput from '../components/LoginInput.vue';

export default {
  components:{TopHeader,LoginInput},
  data() {
    return {
      VCode:'',
      isPhoneLogin:false,
      accountData:{
        email:{
          label:"用户名/邮箱",
          val:"",
        },
        password:{
          label:"密码",
          val:"",
          type:"password",
        }
      },
      phoneData:{
        phoneNum:{
          label:"手机号码",
          val:"",
        },
        verificationCode:{
          label:"验证码",
          val:"",
          right:"点击获得验证码",
          toogle:this.getVerificationCode
        },
      },
    };
  },
  methods: {
    getVerificationCode(){
      const self=this;
      this.$http.get("/api/getVerificationCode").then(
        res=>{
          //console.log(res);
          self.VCode=res.data.data.num;
          self.$success({
            title:"验证码",
            content:(
              <div>
                <p>{self.VCode}</p>
              </div>
            ),
          })
        },
        err=>{

        }
      );
    },
    login(){
      const self=this;
      let promise=null;
      if(this.isPhoneLogin){
        //手机号登录
        if (self.VCode==self.phoneData.verificationCode.val) {
          promise=this.$http.post('/login',{
            phone:self.phoneData.phoneNum.val
          });
        }else{
          self.$message.error("验证码有误");
        }       
      }else{
        //验证登录
        promise=this.$http.post('/login',{
          email:self.accountData.email.val,
          password:self.accountData.password.val
        });
      }


      promise.then(
        (res)=>{
          // console.log("res");
          // console.log(res);
          self.$store.dispatch('setUserInfo',res.data.data.userInfo);
          self.$router.push('/me');
        },
        (err)=>{
          self.$message.error(err);
        }
      );
    },
  },
};

</script>
<style lang="scss" scoped>
.login{
  width: 100%;
  height: 100%;
  background-color: $app-bg-color;
  .account,
  .phone{
    height: 100%;
    .login-content{
      padding: $common-padding;
    }
    .login-opreate{
      height: 20%;
      padding: $common-padding;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
    }
  }
}
h2{
  font-size: 2rem;
  font-weight: bolder;
}
.icon-guanbi{
  font-size: 20px;
  font-weight: bolder;
}
</style>